google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(function(){
  var data = new google.visualization.DataTable();
       data.addColumn('string', '日');
       data.addColumn('number', 'DL数');
       data.addColumn('number', 'Googleセルラン');
       data.addColumn('number', 'iOSセルラン');
       data.addColumn({type:'string', role:'annotation'});
       data.addColumn({type:'string', role:'annotationText'});
       data.addRows([
        ['2021-06-19',317732521,34,48,null,null],
['2021-06-20',317942789,28,53,null,null],
['2021-06-21',318350689,28,44,null,null],
['2021-06-22',318722271,25,44,null,null],
['2021-06-23',319122538,21,44,null,null],
['2021-06-24',319533493,23,45,null,null],
['2021-06-25',319911577,24,48,null,null],
['2021-06-26',320270155,26,55,null,null],
['2021-06-27',320605231,28,48,null,null],
['2021-06-28',321072395,29,47,null,null],
['2021-06-29',321182042,31,59,null,null],
['2021-06-30',321182042,30,67,null,null],
['2021-07-01',322381248,32,88,null,null],
['2021-07-02',322824681,32,92,null,null],
['2021-07-03',323320582,45,75,null,null],
['2021-07-04',323320582,45,69,null,null],
['2021-07-05',323671385,44,61,null,null],
['2021-07-06',324570399,44,62,null,null],
['2021-07-07',325029599,46,56,null,null],
['2021-07-08',325356874,45,56,null,null],
['2021-07-09',325356874,45,47,null,null],
['2021-07-10',325356874,35,57,null,null],
['2021-07-11',325356874,32,56,null,null],
['2021-07-12',325356874,32,56,null,null],
['2021-07-13',325356874,31,62,null,null],
['2021-07-14',325356874,28,71,null,null],
['2021-07-15',325356874,29,66,null,null],
['2021-07-16',328619392,29,58,null,null],
['2021-07-17',329388498,32,58,null,null],
['2021-07-18',329388498,37,56,null,null],
['2021-07-19',329388498,37,48,null,null],
['2021-07-20',330449590,36,51,null,null],
['2021-07-21',330732394,37,54,null,null],
['2021-07-22',331093311,37,74,null,null],
['2021-07-23',331478283,38,57,null,null],
['2021-07-24',331680218,39,64,null,null],
['2021-07-25',331680218,35,57,null,null],
['2021-07-26',331892160,32,48,null,null],
['2021-07-27',332655820,31,48,null,null],
['2021-07-28',332846227,28,45,null,null],
['2021-07-29',333151234,28,48,null,null],
['2021-07-30',333151234,28,52,null,null],
['2021-07-31',333637166,28,54,null,null],
['2021-08-01',333637166,32,74,null,null],
['2021-08-02',333935597,36,93,null,null],
['2021-08-03',334432066,36,84,null,null],
['2021-08-04',334670872,36,65,null,null],
['2021-08-05',334999309,46,64,null,null],
['2021-08-06',335224564,46,58,null,null],
['2021-08-07',335481313,46,60,null,null],
['2021-08-08',335481313,51,50,null,null],
['2021-08-09',335843764,47,47,null,null],
['2021-08-10',336091560,37,53,null,null],
['2021-08-11',336253155,37,69,null,null],
['2021-08-12',336496901,38,70,null,null],
['2021-08-13',336752351,38,59,null,null],
['2021-08-14',336881377,33,59,null,null],
['2021-08-15',336992065,31,58,null,null],
['2021-08-16',337286391,34,55,null,null],
['2021-08-17',337502587,36,60,null,null],
['2021-08-18',337742836,37,50,null,null]
        ]);
  var options = {
    chartArea: {'width':'85%', 'height':'65%', 'left':60 },
    'pointSize': 3,
    legend: {position: 'top' },
    vAxes:[
      {direction:1},
      {direction:-1,viewWindow:{min:0,max:100}}
    ],
    series: {
      0:{
        type: 'bars',
        color: 'skyblue',
        targetAxisIndex: 0,
      },
      1:{
        type: 'line',
        color: 'seagreen',                
        targetAxisIndex: 1,
      },
      2:{
        type: 'line',
        color: 'red',                
        targetAxisIndex: 1,
      },
    },
    tooltip: { trigger: 'both' },
    focusTarget: 'category',
    colors:['#2980b9','#e74c3c']
  };
  var chart = new google.visualization.ComboChart(document.getElementById('graphField'));
  chart.draw(data, options);
  
  google.visualization.events.addListener(chart, 'click', function() {
    if(chart.getSelection()[0]){
      chart.setSelection(null)
    }
  });


});